<template>
  <div class="project-container PendingJob-container">
    <v-card class="project-container-card" tile>
      <v-responsive height="100%" :width="panelWidth[0]" class="box">
        <v-skeleton-loader
          v-if="loadingJobs"
          type="list-item@20"
        ></v-skeleton-loader>
        <template v-else>
          <v-toolbar dense color="#f5f5f5" flat>
            <v-toolbar-title class="box-title">Job</v-toolbar-title>
            <v-btn
              class="ml-2 mr-3"
              width="32"
              height="32"
              color="#D9D9D9"
              fab
              elevation="0"
              @click="overlayFunc(2)"
            >
              <v-icon color="#556282">mdi-plus-thick</v-icon>
            </v-btn>
            <v-col class="pa-0" :cols="2">
              <SelectAll
                :menu-props="{ rounded: 'lg' }"
                class="gray-input rounded-pill mr-2"
                hide-details
                solo
                multiple
                scarecrow="All"
                on-icon="mdi-checkbox-outline"
                indeterminate-icon="mdi-minus-box-outline"
                :items="projectTypeList"
                :selectedItem.sync="selectedProjectType"
              >
              </SelectAll>
            </v-col>
            <v-col class="pa-0" :cols="2">
              <SelectAll
                :menu-props="{ rounded: 'lg' }"
                class="gray-input rounded-pill mr-2"
                hide-details
                solo
                multiple
                scarecrow="Status"
                on-icon="mdi-checkbox-outline"
                indeterminate-icon="mdi-minus-box-outline"
                :items="statusList"
                :selectedItem.sync="selectedStatus"
              >
              </SelectAll>
            </v-col>
            <v-col class="pa-0" :cols="2">
              <SelectAll
                :menu-props="{ rounded: 'lg' }"
                class="gray-input rounded-pill mr-2"
                :show-search="true"
                hide-details
                solo
                multiple
                scarecrow="User"
                on-icon="mdi-checkbox-outline"
                indeterminate-icon="mdi-minus-box-outline"
                :items="userList"
                :selectedItem.sync="selectedUser"
              >
              </SelectAll>
            </v-col>
            <v-col class="pa-0 d-flex align-center">
              <span class="bold"> Job Status </span>
              <v-radio-group v-model="jobStatus" class="ml-2" hide-details row>
                <v-radio
                  value="Ongoing"
                  color="#79839B"
                  label="ongoing"
                ></v-radio>
                <v-radio
                  value="Finished"
                  color="#79839B"
                  label="finished"
                ></v-radio>
              </v-radio-group>
            </v-col>
            <v-btn icon @click="zoomPanel('Jobs')">
              <v-icon small>{{
                zoom1Status ? "mdi-arrow-collapse" : "mdi-arrow-expand"
              }}</v-icon>
            </v-btn>
          </v-toolbar>
          <v-card class="jobs-wrap" flat>
            <v-card
              class="px-2 py-1 d-flex align-center"
              flat
              height="32"
              color="#ECEDEE"
            >
              <v-btn
                @click="toggleSelectAll"
                class="mr-2"
                width="24"
                height="24"
                icon
              >
                <v-icon
                  :color="checkedSomeJob ? '#EB9B31' : ''"
                  hide-details
                  class="ma-0 pa-0"
                >
                  {{ icon }}
                </v-icon>
              </v-btn>
              <v-btn
                @click="endCheckedJobs"
                class="rounded-btn px-2"
                :class="{ disabled: !checkedSomeJob }"
                :disabled="!checkedSomeJob"
                height="100%"
                elevation="0"
                rounded
                color="#79839B"
              >
                End selected job
              </v-btn>
              <v-divider class="mx-2 divider" vertical></v-divider>
              <span class="bold mr-6">Sorting</span>
              <v-btn-toggle
                v-model="sorting"
                class="btn-group"
                color="primary"
                dense
                group
              >
                <v-btn
                  v-for="(btn, index) in btnGroup"
                  :key="index"
                  :disabled="checkedSomeJob"
                  :class="{ disabled: checkedSomeJob }"
                  :value="btn.value"
                  height="100%"
                  text
                >
                  {{ btn.text }}
                </v-btn>
              </v-btn-toggle>
            </v-card>
            <JobsItem
              v-model="checkedJobs"
              :selected.sync="selectedJob"
              :jobList.sync="jobs"
              :show-select="true"
              :show-name="false"
            >
              <template #content-middle="{ item }">
                <v-list-item-content>
                  <v-list-item-title>
                    {{ item.customerName }}
                  </v-list-item-title>
                  <v-list-item-subtitle>
                    <v-col :cols="6" class="pa-0 d-flex">
                      <v-progress-linear
                        :value="item.progress"
                        color="#F8B254"
                        background-color="#BABABC"
                        height="16"
                        class="progress-linear rounded-pill mr-2"
                      ></v-progress-linear>
                      <span class="bold">{{ item.progress }}%</span>
                    </v-col>
                  </v-list-item-subtitle>
                </v-list-item-content>
              </template>
            </JobsItem>
          </v-card>
        </template>
      </v-responsive>
      <v-responsive height="100%" :width="panelWidth[1]" class="box active">
        <v-toolbar dense flat color="#626c84" :dark="true">
          <v-toolbar-title class="box-title">Tasks</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click="zoomPanel('Tasks')">
            <v-icon small>{{
              zoom2Status ? "mdi-arrow-collapse" : "mdi-arrow-expand"
            }}</v-icon>
          </v-btn>
        </v-toolbar>
        <v-skeleton-loader
          v-if="loadingTasks"
          type="article, list-item@20"
        ></v-skeleton-loader>
        <Tasks v-else-if="tasks && project" :project="project" :tasks="tasks" />
      </v-responsive>
    </v-card>
    <v-overlay :value="overlay">
      <AddNew :step="step" />
    </v-overlay>
    <SelectDialog
      @click="selectProject"
      v-model="showSelectDialog"
      :headers="tableHeaders"
      :items="tableItems"
      :loading="selectLoading"
      title="Select Project"
      width="904"
    ></SelectDialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import JobsItem from "@/components/Project/Jobs/JobsItem.vue";
import Tasks from "@/components/Project/Tasks/Tasks.vue";
import AddNew from "@/components/Project/AddNew/Index.vue";
import Chats from "@/components/Project/Chats/index.vue";
import SelectAll from "@/components/Dashboard/SelectAll/SelectAll.vue";
import TreeSelect from "@/components/Dashboard/SelectAll/TreeSelect.vue";
import SelectDialog from "@/components/Project/SelectDialog/SelectDialog.vue";
import { IProjectItem, IJobItem, ITasks } from "@/components/Project/index";
type IPendingJobJobs = IPendingJobJobItem[];
interface IPendingJobJobItem extends IJobItem {
  project: IProjectItem;
}

@Component({
  components: {
    Dialog,
    JobsItem,
    Tasks,
    AddNew,
    Chats,
    SelectAll,
    TreeSelect,
    SelectDialog,
  },
})
export default class PendingJob extends Vue {
  step = 1;
  switchStep(step: number) {
    this.step = step;
  }
  // selectDialog
  selectLoading = false;
  showSelectDialog = false;
  tableHeaders = [
    {
      text: "Project Code",
      value: "companyCode",
    },
    {
      text: "Project Name",
      value: "customerName",
    },
  ];
  tableItems: object[] = [];
  selectedProject: object | null = null;
  openSelectDialog() {
    if (this.tableItems.length === 0) {
      this.getTableItems();
    }
    this.showSelectDialog = true;
  }
  closeSelectDialog() {
    this.showSelectDialog = false;
  }
  getTableItems() {
    this.selectLoading = true;
    setTimeout(() => {
      (this.tableItems = [
        {
          id: "1",
          tel: "9028 2389",
          address: "timwong@yahoo.com",
          customerName: "Auto Company",
          companyCode: "000092",
          contactPerson: "Tim Wong",
          projectName: "Service Report testing",
          projectNumber: "20211209",
          priority: "Low",
          projectType: "DL",
          projectDescription:
            "Check control panels and electrical wiring to identify issues",
          projectLocation:
            " 11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong, Kowloon",
          serviceProvider: "e-solutions",
          startDate: "2021-12-09",
          endDate: "2021-12-09",
          jobSum: 5,
          tasksSum: 2,
          partnerList: [
            {
              userID: "1",
              memberName: "Admin",
              tel: "9322 2388",
              location: "Office",
              contractor: "CON",
              contactCode: "CON-0002",
              customerName: "Sample Contractor",
            },
            {
              userID: "2",
              memberName: "Sasa",
              tel: "9348 2389",
              location: "Office",
              contractor: "SUP",
              contactCode: "CON-0001",
              customerName: "Sample Contractor A",
            },
          ],
        },
        {
          id: "2",
          tel: "9028 2389",
          address: "timwong@yahoo.com",
          customerName: "Sample Company",
          companyCode: "000104",
          contactPerson: "Tim Wong",
          projectName: "System Integration test",
          projectNumber: "20211213",
          priority: "High",
          projectType: "TA",
          projectDescription:
            "Check control panels and electrical wiring to identify issues",
          projectLocation:
            " 11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong, Kowloon",
          serviceProvider: "e-solutions",
          startDate: "2021-12-09",
          endDate: "2021-12-09",
          jobSum: 4,
          tasksSum: 3,
          partnerList: [
            {
              userID: "1",
              memberName: "Admin",
              tel: "9322 2388",
              location: "Office",
              contractor: "CON",
              contactCode: "CON-0002",
              customerName: "Sample Contractor",
            },
            {
              userID: "2",
              memberName: "Sasa",
              tel: "9348 2389",
              location: "Office",
              contractor: "SUP",
              contactCode: "CON-0001",
              customerName: "Sample Contractor A",
            },
          ],
        },
        {
          id: "3",
          tel: "9028 2389",
          address: "timwong@yahoo.com",
          customerName: "Meow Company",
          companyCode: "000114",
          contactPerson: "Tim Wong",
          projectName: "New Project",
          projectNumber: "20211217",
          priority: "Low",
          projectType: "TG",
          projectDescription:
            "Check control panels and electrical wiring to identify issues",
          projectLocation:
            " 11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong, Kowloon",
          serviceProvider: "e-solutions",
          startDate: "2021-12-09",
          endDate: "2021-12-09",
          jobSum: 1,
          tasksSum: 0,
          partnerList: [
            {
              userID: "1",
              memberName: "Admin",
              tel: "9322 2388",
              location: "Office",
              contractor: "CON",
              contactCode: "CON-0002",
              customerName: "Sample Contractor",
            },
            {
              userID: "2",
              memberName: "Sasa",
              tel: "9348 2389",
              location: "Office",
              contractor: "SUP",
              contactCode: "CON-0001",
              customerName: "Sample Contractor A",
            },
          ],
        },
        {
          id: "4",
          tel: "9028 2389",
          address: "timwong@yahoo.com",
          companyCode: "000184",
          customerName: "House Furniture Company",
          contactPerson: "Tim Wong",
          projectName: "System Support ",
          projectNumber: "20211217",
          priority: "Middle",
          projectType: "WN",
          projectDescription:
            "Check control panels and electrical wiring to identify issues",
          projectLocation:
            " 11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong, Kowloon",
          serviceProvider: "e-solutions",
          startDate: "2021-12-09",
          endDate: "2021-12-09",
          jobSum: 4,
          tasksSum: 3,
          partnerList: [
            {
              userID: "1",
              memberName: "Admin",
              tel: "9322 2388",
              location: "Office",
              contractor: "CON",
              contactCode: "CON-0002",
              customerName: "Sample Contractor",
            },
            {
              userID: "2",
              memberName: "Sasa",
              tel: "9348 2389",
              location: "Office",
              contractor: "SUP",
              contactCode: "CON-0001",
              customerName: "Sample Contractor A",
            },
          ],
        },
      ]),
        (this.selectLoading = false);
    }, 2500);
  }
  selectProject(project: object) {
    this.selectedProject = project;
    this.openAddNewJob();
  }
  // Add New Job
  openAddNewJob() {
    this.closeSelectDialog();
    this.$store.commit({
      type: "OverlayStore/awakeStatus",
    });
  }
  // checkbox
  onIcon = "mdi-checkbox-marked";
  offIcon = "mdi-checkbox-blank-outline";
  indeterminateIcon = "mdi-minus-box";
  get checkedAllJob() {
    if (this.checkedJobs.length === 0 && this.jobs.length === 0) {
      return false;
    } else {
      return this.jobs.every((job: IPendingJobJobItem) =>
        this.checkedJobs.includes(job)
      );
    }
  }
  get checkedSomeJob() {
    return this.checkedJobs.some((job: IPendingJobJobItem) =>
      this.jobs.includes(job)
    );
  }
  get icon() {
    if (this.checkedAllJob) return this.onIcon;
    if (this.checkedSomeJob) return this.indeterminateIcon;
    return this.offIcon;
  }
  toggleSelectAll() {
    if (this.checkedAllJob) {
      this.checkedJobs = [];
    } else {
      this.checkedJobs.push(...this.jobs);
    }
  }
  // project
  get project(): IProjectItem | null {
    if (this.selectedJob) {
      return this.selectedJob.project;
    } else {
      return null;
    }
  }
  // jobs toolbar
  sorting: keyof IPendingJobJobItem | null = null;
  btnGroup = [
    {
      text: "Project",
      value: "project",
    },
    {
      text: "Job Number",
      value: "number",
    },
    {
      text: "Job Name",
      value: "jobName",
    },
    {
      text: "Job Description",
      value: "jobDescription",
    },
    {
      text: "Contact Person",
      value: "contactPerson",
    },
    {
      text: "Date",
      value: "endDate",
    },
  ];
  // jobs
  loadingJobs = false;
  jobStatus = "Ongoing";
  // @Watch("jobStatus")
  // onJobStatusChange() {
  //   this.selectedJob = null;
  // }
  timeout: number | null = null;
  checkedJobs: IPendingJobJobItem[] = [];
  get selectedJob(): IPendingJobJobItem | null {
    return this.$store.state.PendingJobStore.selectedJob;
  }
  set selectedJob(job: IPendingJobJobItem | null) {
    if (job) {
      this.$store.commit("PendingJobStore/setSelectedJob", job);
    } else {
      this.$store.commit("PendingJobStore/setSelectedJob", null);
    }
  }
  get jobs(): Array<IPendingJobJobItem> {
    const jobs = this.$store.state.PendingJobStore.jobs;
    if (jobs) {
      // 根据jobStatus展示数据
      let validateJobs = jobs.filter((job: IPendingJobJobItem) => {
        let validate = true;
        if (job.status !== this.jobStatus) {
          validate = false;
        }
        return validate;
      });
      // 没有数据或者数据只有一条的时候则不需要排序直接return
      if (validateJobs.length <= 1) {
        return validateJobs;
      }
      // 排序
      if (this.sorting) {
        const jobKey = this.sorting;
        validateJobs.sort(
          (job1: IPendingJobJobItem, job2: IPendingJobJobItem) => {
            let job1Initial = "";
            let job2Initial = "";
            const job1Val = job1[jobKey];
            const job2Val = job2[jobKey];
            if (jobKey === "project") {
              job1Initial = (job1.project.id as string).substring(0, 1);
              job2Initial = (job2.project.id as string).substring(0, 1);
            } else if (jobKey === "endDate") {
              return new Date(job1Val as string) > new Date(job2Val as string)
                ? 1
                : -1;
            } else {
              job1Initial = (job1Val as string).substring(0, 1);
              job2Initial = (job2Val as string).substring(0, 1);
            }

            return job1Initial > job2Initial ? 1 : -1;
          }
        );
      }
      return validateJobs;
    } else {
      this.selectedJob = null;
      return [];
    }
  }
  setJobs() {
    this.loadingJobs = true;
    this.timeout = setTimeout(() => {
      const jobs: IPendingJobJobs = [
        {
          id: "1",
          jobCate: "DL",
          customerName: "Auto Company",
          progress: 70,
          number: "2021120901",
          status: "Ongoing",
          priority: "High",
          startDate: "2021-12-09 15:30",
          endDate: "2022-12-09 16:00",
          jobName: "User Testing",
          tel: "9028 2389",
          contactPerson: "Tim Wong",
          jobDescription:
            "Check control panels and electrical wiring to identify issues",
          projectLocation:
            "11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong, Kowloon",
          tasksSum: 2,
          assignTo: "Mark Wong",
          remarks:
            "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control.Peerless Automation,Unlimited Users, ISO Accredited",
          reportProblemList: [
            {
              id: "1",
              serialNumber: "AC0001",
              itemDescription: "Air conditioner",
              symptoms: "TTI",
            },
            {
              id: "2",
              serialNumber: "AC0002",
              itemDescription: "Cooling System",
              symptoms: "DN",
            },
          ],
          attachmentList: [
            {
              id: "1",
              date: "2021-08-15",
              number: "DL-20211209001",
              fileList: [
                {
                  id: "1",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2022/10/03/21/47/fog-7496901_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "2",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "3",
                  ext: "jpg",
                  src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
              ],
            },
            {
              id: "2",
              date: "2021-08-08",
              number: "DL-20211209002",
              fileList: [
                {
                  id: "1",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2022/10/03/21/47/fog-7496901_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "2",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "3",
                  ext: "jpg",
                  src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "4",
                  ext: "jpg",
                  src: "https://ts1.cn.mm.bing.net/th/id/R-C.40e8a86c22b0e5211b838d35eb3ed2e9?rik=10BkvUtRe%2bUfFA&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201603%2f23%2f201603230207284852.jpg&ehk=u8msuCl9ufjNb919xfDzyz6n%2bfNrpMx6gzFcWxjPXDI%3d&risl=&pid=ImgRaw&r=0",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "6",
                  ext: "jpg",
                  src: "https://ts1.cn.mm.bing.net/th/id/R-C.18c926a5b5b33e6c7ec7938fe79714a6?rik=XROULmNY%2fkPEcQ&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201603%2f23%2f201603230207284857.jpg&ehk=Daa7YSXlRf09mbTzfKuvuRlPY%2fsqG0qDVAZqb%2bvkVB0%3d&risl=&pid=ImgRaw&r=0",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
              ],
            },
          ],
          project: {},
        },
        {
          id: "2",
          jobCate: "ST",
          number: "2021120902",
          customerName: "Auto Company",
          progress: 70,
          status: "Finished",
          priority: "Middle",
          startDate: "2021-12-09 15:30",
          endDate: "2022-12-10 16:00",
          jobName: "System Alert",
          tel: "9028 2389",
          contactPerson: "Tim Wong",
          jobDescription:
            "Check control panels and electrical wiring to identify issues",
          projectLocation:
            "11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong, Kowloon",
          tasksSum: 0,
          assignTo: "Mark Wong",
          remarks:
            "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control.Peerless Automation,Unlimited Users, ISO Accredited",
          reportProblemList: [
            {
              id: "1",
              serialNumber: "AC0001",
              itemDescription: "Air conditioner",
              symptoms: "TTI",
            },
            {
              id: "2",
              serialNumber: "AC0002",
              itemDescription: "Cooling System",
              symptoms: "DN",
            },
          ],
          attachmentList: [
            {
              id: "1",
              date: "2021-08-15",
              number: "DL-20211209001",
              fileList: [
                {
                  id: "1",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2022/10/03/21/47/fog-7496901_960_720.jpg",
                  title: "FS-21080002",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "2",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "3",
                  ext: "jpg",
                  src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
              ],
            },
            {
              id: "2",
              date: "2021-08-08",
              number: "DL-20211209002",
              fileList: [
                {
                  id: "1",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2022/10/03/21/47/fog-7496901_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "2",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "3",
                  ext: "jpg",
                  src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "4",
                  ext: "jpg",
                  src: "https://ts1.cn.mm.bing.net/th/id/R-C.40e8a86c22b0e5211b838d35eb3ed2e9?rik=10BkvUtRe%2bUfFA&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201603%2f23%2f201603230207284852.jpg&ehk=u8msuCl9ufjNb919xfDzyz6n%2bfNrpMx6gzFcWxjPXDI%3d&risl=&pid=ImgRaw&r=0",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "6",
                  ext: "jpg",
                  src: "https://ts1.cn.mm.bing.net/th/id/R-C.18c926a5b5b33e6c7ec7938fe79714a6?rik=XROULmNY%2fkPEcQ&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201603%2f23%2f201603230207284857.jpg&ehk=Daa7YSXlRf09mbTzfKuvuRlPY%2fsqG0qDVAZqb%2bvkVB0%3d&risl=&pid=ImgRaw&r=0",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
              ],
            },
          ],
          project: {},
        },
        {
          id: "3",
          jobCate: "DL",
          number: "2021120904",
          customerName: "Auto Company",
          progress: 70,
          status: "Finished",
          priority: "Middle",
          startDate: "2021-12-09 15:30",
          endDate: "2022-12-09 16:00",
          jobName: "Installing",
          tel: "9028 2389",
          contactPerson: "Tim Wong",
          jobDescription:
            "Check control panels and electrical wiring to identify issues",
          projectLocation:
            "11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong, Kowloon",
          tasksSum: 3,
          assignTo: "Mark Wong",
          remarks:
            "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control.Peerless Automation,Unlimited Users, ISO Accredited",
          reportProblemList: [
            {
              id: "1",
              serialNumber: "AC0001",
              itemDescription: "Air conditioner",
              symptoms: "TTI",
            },
            {
              id: "2",
              serialNumber: "AC0002",
              itemDescription: "Cooling System",
              symptoms: "DN",
            },
          ],
          attachmentList: [
            {
              id: "1",
              date: "2021-08-15",
              number: "DL-20211209001",
              fileList: [
                {
                  id: "1",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2022/10/03/21/47/fog-7496901_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "2",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "3",
                  ext: "jpg",
                  src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
              ],
            },
            {
              id: "2",
              date: "2021-08-08",
              number: "DL-20211209002",
              fileList: [
                {
                  id: "1",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2022/10/03/21/47/fog-7496901_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "2",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "3",
                  ext: "jpg",
                  src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "4",
                  ext: "jpg",
                  src: "https://ts1.cn.mm.bing.net/th/id/R-C.40e8a86c22b0e5211b838d35eb3ed2e9?rik=10BkvUtRe%2bUfFA&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201603%2f23%2f201603230207284852.jpg&ehk=u8msuCl9ufjNb919xfDzyz6n%2bfNrpMx6gzFcWxjPXDI%3d&risl=&pid=ImgRaw&r=0",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "6",
                  ext: "jpg",
                  src: "https://ts1.cn.mm.bing.net/th/id/R-C.18c926a5b5b33e6c7ec7938fe79714a6?rik=XROULmNY%2fkPEcQ&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201603%2f23%2f201603230207284857.jpg&ehk=Daa7YSXlRf09mbTzfKuvuRlPY%2fsqG0qDVAZqb%2bvkVB0%3d&risl=&pid=ImgRaw&r=0",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
              ],
            },
          ],
          project: {},
        },
        {
          id: "4",
          jobCate: "UT",
          number: "2021120904",
          customerName: "Auto Company",
          progress: 70,
          status: "Finished",
          priority: "Middle",
          startDate: "2021-12-09 15:30",
          endDate: "2022-12-09 16:00",
          jobName: "Installing",
          tel: "9028 2389",
          contactPerson: "Tim Wong",
          jobDescription:
            "Check control panels and electrical wiring to identify issues",
          projectLocation:
            "11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong, Kowloon",
          tasksSum: 3,
          assignTo: "Mark Wong",
          remarks:
            "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control.Peerless Automation,Unlimited Users, ISO Accredited",
          reportProblemList: [
            {
              id: "1",
              serialNumber: "AC0001",
              itemDescription: "Air conditioner",
              symptoms: "TTI",
            },
            {
              id: "2",
              serialNumber: "AC0002",
              itemDescription: "Cooling System",
              symptoms: "DN",
            },
          ],
          attachmentList: [
            {
              id: "1",
              date: "2021-08-15",
              number: "DL-20211209001",
              fileList: [
                {
                  id: "1",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2022/10/03/21/47/fog-7496901_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "2",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "3",
                  ext: "jpg",
                  src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
              ],
            },
            {
              id: "2",
              date: "2021-08-08",
              number: "DL-20211209002",
              fileList: [
                {
                  id: "1",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2022/10/03/21/47/fog-7496901_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "2",
                  ext: "jpg",
                  src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "3",
                  ext: "jpg",
                  src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "4",
                  ext: "jpg",
                  src: "https://ts1.cn.mm.bing.net/th/id/R-C.40e8a86c22b0e5211b838d35eb3ed2e9?rik=10BkvUtRe%2bUfFA&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201603%2f23%2f201603230207284852.jpg&ehk=u8msuCl9ufjNb919xfDzyz6n%2bfNrpMx6gzFcWxjPXDI%3d&risl=&pid=ImgRaw&r=0",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
                {
                  id: "6",
                  ext: "jpg",
                  src: "https://ts1.cn.mm.bing.net/th/id/R-C.18c926a5b5b33e6c7ec7938fe79714a6?rik=XROULmNY%2fkPEcQ&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201603%2f23%2f201603230207284857.jpg&ehk=Daa7YSXlRf09mbTzfKuvuRlPY%2fsqG0qDVAZqb%2bvkVB0%3d&risl=&pid=ImgRaw&r=0",
                  title: "FS-21080001",
                  subtitle: "Inspection Sheet",
                },
              ],
            },
          ],
          project: {},
        },
      ];
      this.$store.commit("PendingJobStore/setJobs", jobs);
      this.$nextTick(() => {
        if (jobs.length > 0) {
          // this.selectedJob = jobs[0];
          this.zoom1Status = false;
          this.zoom2Status = false;
          this.panelWidth = ["50%", "50%"];
        } else {
          // this.selectedJob = null;
          this.zoom1Status = true;
          this.zoom2Status = false;
          this.panelWidth = ["100%", "0%"];
        }
      });
      this.loadingJobs = false;
    }, 1500);
  }
  endCheckedJobs() {
    for (let i = 0; i < this.checkedJobs.length; i++) {
      const checkedJob = this.checkedJobs[i];
      const jobIndex = this.jobs.indexOf(checkedJob);
      if (jobIndex >= 0) {
        this.jobs.splice(jobIndex, 1);
      }
    }
    this.checkedJobs = [];
  }
  // tasks
  loadingTasks = false;
  tasks: ITasks | null = null;
  @Watch("selectedJob", { immediate: true })
  onSelectedJobChange(selectedJob: IPendingJobJobItem) {
    if (selectedJob) {
      this.loadingTasks = true;
      setTimeout(() => {
        const tasks: ITasks = {
          id: "1",
          number: "000092",
          customerName: "Auto Company",
          taskNumber: "DL-2021120901.01",
          jobNumber: "DL-2021120901",
          updateDate: "2021-11-12",
          updateTime: "15:23:46",
          progress: 60,
          tasksSum: 2,
          activitiesSum: 4,
          taskList: [
            {
              id: "1",
              taskNumber: "ST-2021120901.01",
              taskName: "Fix Door Handle",
              status: "Ongoing",
              priority: "High",
              activitiesSum: 3,
              startDate: "2021-12-09 15:30",
              endDate: "2022-12-09 16:00",
              info: "Providing Electrical service ",
              reportProblemList: [
                {
                  id: "1",
                  serialNumber: "AC0001",
                  itemDescription: "Air conditioner",
                  problemType: "Power supply failure",
                  solution: "Swap the PSU power cable ",
                  symptoms: "Steam system failure",
                },
                {
                  id: "2",
                  serialNumber: "AC0002",
                  itemDescription: "Air conditioner",
                  problemType: "Power supply failure",
                  solution: "Swap the PSU power cable ",
                  symptoms: "Making Noises",
                },
                {
                  id: "3",
                  serialNumber: "AC0003",
                  itemDescription: "Air conditioner",
                  problemType: "Power supply failure",
                  solution: "Swap the PSU power cable ",
                  symptoms: "System flashing",
                },
              ],
              activityLog: [
                {
                  id: "1",
                  date: "2022-08-15 15:46",
                  user: "Marcus Mo",
                  avatarSrc: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
                  procedure: "Reassign to Admin",
                  place: "Cable TV Tower, 9 Hoi Shing Road,Tsuen Wan",
                },
                {
                  id: "2",
                  date: "2022-08-18 15:48",
                  user: "Marcus Mo",
                  avatarSrc: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
                  procedure: "Start",
                  place: "Cable TV Tower, 9 Hoi Shing Road,Tsuen Wan",
                },
                {
                  id: "3",
                  date: "2022-08-20 15:40",
                  user: "Marcus Mo",
                  avatarSrc: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
                  procedure: "Checking",
                  place: "Cable TV Tower, 9 Hoi Shing Road,Tsuen Wan",
                },
              ],
              attachmentList: [
                {
                  id: "1",
                  date: "2021-08-23",
                  number: "DL-20211209002",
                  fileList: [
                    {
                      id: "1",
                      src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                      ext: "jpg",
                      title: "FS-21080001",
                      subtitle: "Inspection Sheet",
                    },
                    {
                      id: "2",
                      src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                      ext: "jpg",
                      title: "FS-21080001",
                      subtitle: "Inspection Sheet",
                    },
                  ],
                },
              ],
            },
            {
              id: "2",
              taskNumber: "ST-2021120901.02",
              taskName: "Oil painting",
              status: "New Job",
              priority: "Low",
              activitiesSum: 1,
              startDate: "2021-12-13",
              endDate: "2022-12-13",
              info: "Providing Electrical service ",
              reportProblemList: [
                {
                  id: "1",
                  serialNumber: "AC0001",
                  itemDescription: "Air conditioner",
                  problemType: "Power supply failure",
                  solution: "Swap the PSU power cable ",
                  symptoms: "Steam system failure",
                },
              ],
              activityLog: [
                {
                  id: "1",
                  date: "2022-08-15 15:46",
                  user: "Marcus Mo",
                  avatarSrc: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
                  procedure: "Reassign to Admin",
                  place: "Cable TV Tower, 9 Hoi Shing Road,Tsuen Wan",
                },
                {
                  id: "2",
                  date: "2022-08-18 15:48",
                  user: "Marcus Mo",
                  avatarSrc: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
                  procedure: "Start",
                  place: "Cable TV Tower, 9 Hoi Shing Road,Tsuen Wan",
                },
                {
                  id: "3",
                  date: "2022-08-20 15:40",
                  user: "Marcus Mo",
                  avatarSrc: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
                  procedure: "Checking",
                  place: "Cable TV Tower, 9 Hoi Shing Road,Tsuen Wan",
                },
              ],
              attachmentList: [
                {
                  id: "1",
                  date: "2021-08-23",
                  number: "DL-20211209002",
                  fileList: [
                    {
                      id: "1",
                      src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                      ext: "jpg",
                      title: "FS-21080001",
                      subtitle: "Inspection Sheet",
                    },
                    {
                      id: "2",
                      src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                      ext: "jpg",
                      title: "FS-21080001",
                      subtitle: "Inspection Sheet",
                    },
                  ],
                },
              ],
            },
          ],
        };
        this.tasks = tasks;
        this.loadingTasks = false;
      }, 1500);
    } else {
      this.tasks = null;
      this.loadingTasks = false;
    }
  }
  // select
  projectTypeList = [
    {
      id: "1",
      text: "Project",
    },
    {
      id: "2",
      text: "Adhoc",
    },
    {
      id: "3",
      text: "Customer Contract",
    },
  ];
  selectedProjectType = [this.projectTypeList[1]];
  statusList = [
    {
      id: "1",
      text: "Completed",
    },
    {
      id: "2",
      text: "Quoted",
    },
    {
      id: "3",
      text: "Work in progress",
    },
  ];
  selectedStatus = [this.statusList[1]];
  userList: object = [];
  selectedUser = [];
  getUserList() {
    this.userList = [
      {
        id: "1",
        text: "Admin",
        children: [
          {
            id: "2",
            text: "Angela Lo",
          },
          {
            id: "3",
            text: "Ken Wong",
          },
          {
            id: "4",
            text: "Kin Fei To",
          },
        ],
      },
      {
        id: "2",
        text: "Customer Service Team",
      },
      {
        id: "3",
        text: "Field Service Engineer",
      },
    ];
  }

  panelWidth = ["100%", "0%"];
  zoom1Status = true;
  zoom2Status = false;
  zoomPanel(keyWord: string) {
    switch (keyWord) {
      case "Jobs":
        this.zoom1Status = !this.zoom1Status;
        if (this.zoom1Status) {
          this.zoom2Status = true;
          this.panelWidth = ["60%", "40%"];
        } else {
          this.zoom2Status = false;
          this.panelWidth = ["50%", "50%"];
        }
        break;
      case "Tasks":
        this.zoom2Status = !this.zoom2Status;
        if (this.zoom2Status) {
          this.zoom1Status = false;
          this.panelWidth = ["40%", "60%"];
        } else {
          this.zoom1Status = false;
          this.panelWidth = ["50%", "50%"];
        }
        break;
      default:
        break;
    }
  }
  get overlay() {
    return this.$store.state.OverlayStore.overlayStatus;
  }
  overlayFunc(step: number) {
    this.switchStep(step);
    this.openSelectDialog();
  }

  created() {
    this.getUserList();
    this.setJobs();
  }
  mounted() {
    this.$store.dispatch("ProjectsStore/refreshContactPersonList");
  }
}
</script>

<style lang="scss">
@import "@/views/02000000-PendingJob/index.scss";
@import "@/views/07000000-Project/Project.scss";
</style>
